<template>
  <view class="add-demo">
    <view class="desc-box"><textarea class="desc-content" placeholder="请输入文字描述" maxlength="1000" auto-height v-model="desc" @change="updateDesc"></textarea></view>
    <view class="file-box">
      <view v-if="!tempFilePath" class="add-file" @click="chooseFile()"><view class="iconfont icon-add"></view></view>
      <view v-else class="file-preview">
        <cover-view class="delete-file" @click="clearFile()">X</cover-view>
        <image v-if="fileType === FILE_TYPE.IMAGE" class="demo-file" :src="previewPath" mode="aspectFill" @click="previewImg()"></image>
        <video v-if="fileType === FILE_TYPE.VIDEO" class="demo-file" :src="previewPath"></video>
      </view>
    </view>
    <view class="submit-btn" @click="submit()">确定</view>
  </view>
</template>

<script>
import { FILE_TYPE } from '@/constant/index.js'
import mixin from '@/mixins/index.js'
import { getGUID } from '@/utils/index.js'
export default {
  mixins: [mixin],
  data() {
    return {
      desc: '',
      previewPath: '',
      tempFilePath: '',
      fileType: '',
      tempFile: {},
      filePath: '',
      projectMedia: [],
      FILE_TYPE
    }
  },
  mounted() {
    this.getProjectInfo()
  },
  methods: {
    getProjectInfo() {
      const self = this
      uni.request({
        url: '/project/get',
        data: {
          id: self.params.id
        },
        success(result) {
          if (result.data.success && result.data.data) {
            const projectInfo = result.data.data
            if (projectInfo.imgs) {
              try {
                const imgs = JSON.parse(projectInfo.imgs)
                if (Array.isArray(imgs)) {
                  self.projectMedia = imgs
                }
              } catch (e) {
                self.projectMedia = []
                console.error(e)
              }
            }
          }
        }
      })
    },
    updateDesc(e) {
      this.desc = e.detail.value
    },
    chooseFile() {
      const self = this
      uni.chooseMedia({
        count: 1,
        maxDuration: 30,
        success(result) {
          console.log('choose file', result)
          self.tempFile = result.tempFiles[0]
          self.fileType = result.type || self.tempFile.fileType
          self.tempFilePath = self.tempFile.tempFilePath
          self.previewPath = self.tempFile.tempFilePath
        }
      })
    },
    clearFile() {
      this.tempFilePath = ''
      this.previewPath = ''
      this.filePath = ''
    },
    previewImg() {
      uni.previewImage({
        urls: [this.previewPath]
      })
    },
    submit() {
      const self = this
      if (self.tempFilePath) {
        self.uploadFile(self.tempFilePath, () => {
          self.saveDemo()
        })
      }
    },
    uploadFile(filePath, callback) {
      const self = this
      uni.uploadFile({
        url: '/sys/upload',
        filePath,
        name: 'file',
        success(result) {
          if (result.data.url) {
            self.filePath = result.data.url
            if (callback instanceof Function) {
              callback()
            }
          }
        }
      })
    },
    saveDemo() {
      const self = this
      const mediaItem = {
        key: getGUID(),
        type: self.fileType,
        path: self.filePath,
        desc: self.desc.trim()
      }
      self.projectMedia.push(mediaItem)
      uni.request({
        url: '/project/modify',
        method: 'POST',
        data: {
          id: self.params.id,
          imgs: JSON.stringify(self.projectMedia)
        },
        success(result) {
          if (result.data.success) {
            uni.showToast({
              icon: 'success',
              title: '保存成功'
            })
            self.goBack()
          }
        }
      })
    },
    goBack() {
      uni.navigateBack();
    }
  }
}
</script>

<style lang="scss" scoped>
.add-demo {
  height: 100vh;
  position: relative;
  padding: 30rpx;
  background-color: $white;
}
.desc-box {
  border-bottom: 2rpx solid $border-base;
  padding-bottom: 30rpx;
}
.desc-content {
  min-height: 220rpx;
  max-height: 600rpx;
  width: 100%;
  font-size: $font-size-3;
}
.file-box {
  margin-top: 30rpx;
}
.add-file {
  width: 100%;
  height: 460rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10rpx;
  border: 2rpx dashed $border-base;
  font-size: 72rpx;
  color: $text-base;
}
.file-preview {
  position: relative;
  .delete-file {
    position: absolute;
    width: 50rpx;
    height: 50rpx;
    line-height: 50rpx;
    text-align: center;
    top: 0;
    right: 0;
    color: $white;
    background-color: $danger;
    font-size: $font-size-5;
    &:after {
      content: '';
      display: block;
      position: absolute;
      left: -10rpx;
      right: -10rpx;
      top: -10rpx;
      bottom: -10rpx;
    }
  }
  .demo-file {
    width: 100%;
    height: 460rpx;
  }
}
.submit-btn {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: $primary;
  color: $white;
  height: 100rpx;
  text-align: center;
  line-height: 100rpx;
  font-size: $font-size-4;
}
</style>
